<script setup>
import { ref } from 'vue'

const props = defineProps({
  actions: { type: Array, default: ()=> [] },
  onRefresh: { type: Function, default: null },
  onAdd: { type: Function, default: null },
  onEdit: { type: Function, default: null },
  onDelete: { type: Function, default: null },
  onAudit: { type: Function, default: null },
  onConfirm: { type: Function, default: null },
  onSearch: { type: Function, default: () => alert('请先设置参数') },
  allEvent: {type: Object, default: null},
  advanced: { type: Boolean, default: false}
})
// 显示高级搜索 开关
const visible = ref(false)
const searchValue = ref('')
// 查询结构
//const queryData = ref({searchKey: '管理'})
// search 模糊查询
const onSearchVisible = () => {
  visible.value = !visible.value
}

// 通用查询
const handleGeneralSearch = () => {
  if (typeof (props.onSearch) == 'function') {
    console.info('search.Key')
    let queryData = {searchKey: searchValue.value}
    props.onSearch(queryData)
  }
}

// 执行事命令
const executeCommand = (cmmand) => {
  if (typeof (cmmand) == 'function')
    cmmand()
}
// 处理按钮事件
const handleClickAction = (key) => {
  let cmd = null
  if (key == 'refresh') {
    cmd = props.onRefresh
  } else if (key == 'add') {
    cmd = props.allEvent?.addEvent || props.onAdd
  } else if (key == 'edit') {
    cmd = props.allEvent?.editEvent || props.onEdit
  } else if (key == 'delete') {
    cmd = props.allEvent?.deleteEvent || props.onDelete
  } else if (key == 'audit') {
    cmd = props.allEvent?.auditEvent || props.onAudit
  } else if (key == 'confirm') {
    cmd = props.allEvent?.confirmEvent || props.onConfirm
  } else {
    console.error('No Match Action')
  }
  executeCommand(cmd)
}
</script>

<template>
  <div class="action-bar">
    <div class="action-wrap">
      <a-button v-if="actions.includes('refresh')" color="#f50" @click="handleClickAction('refresh')">
        <template #icon><sync-outlined /></template>刷新
      </a-button>
      <a-button v-if="actions.includes('add')" type="primary" @click="handleClickAction('add')">
        <template #icon><plus-outlined /></template>新增
      </a-button>
      <a-button v-if="actions.includes('edit')" type="primary" @click="handleClickAction('edit')">
        <template #icon><edit-outlined /></template>修改
      </a-button>
      <a-button v-if="actions.includes('delete')" type="primary" danger @click="handleClickAction('delete')">
        <template #icon><delete-outlined /></template>删除
      </a-button>
      <a-button v-if="actions.includes('audit')" type="primary" @click="handleClickAction('audit')">
        <template #icon><audit-outlined /></template>审批
      </a-button>
      <a-button v-if="actions.includes('confirm')" type="primary" @click="handleClickAction('confirm')">
        <template #icon><carry-out-outlined /></template>确认
      </a-button>
      <!-- 自定义按钮 -->
      <slot />
      <slot name="buttons" />
    </div>
    <div class="search-wrap">
      <a-input-search v-model:value="searchValue" placeholder="模糊查询" allow-clear @search="handleGeneralSearch" />
      <!-- 高级查询 开关-->
      <a-button v-if="(!visible) && advanced " type="text" @click="onSearchVisible">
        <template #icon><down-outlined /></template>
      </a-button>
      <a-button v-if="visible && advanced" type="text" @click="onSearchVisible">
        <template #icon><up-outlined /></template>
      </a-button>
    </div>
  </div>
  <!-- 高级查询 主体-->
  <transition name="cycle" mode="out-in">
    <div v-if="visible && advanced" class="search-content">
      <a-card hoverable>
        <slot />
        <a-button type="primary" @click="handleGeneralSearch">搜索</a-button>
      </a-card>
    </div>
  </transition>
</template>
<style lang="less" scoped>
.action-bar {
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  border-bottom: 1px dotted rgb(173, 64, 20);
  background-color:rgb(190, 200, 200);
  padding: 5px 5px;
  margin: 2px -15px;
  * {
    display: flex;
    flex-flow: row nowrap;
    align-items:center;
  }
  .action-wrap{
    padding: 5px 3px;
    background-color:rgb(190, 200, 200);
  }
  .search-wrap{
    background-color: rgb(190, 200, 200);
  }
}

.cycle-enter-active,.cycle-leave-active{
  transition: all 0.5s;
}
.cycle-enter-from,.cycle-leave-to{
  transform: translateY(-20px);
  opacity: 0;
}
.cycle-enter-to,.cycle-leave-from{
  transition: all 0.5s;
}
</style>
